<template>
	<div class="charge-container">
		<template>
			<el-table :data="vipList" border style="width: 100%">
				<el-table-column align="center" label="产品图片" width="130">
					<!-- 插槽作用域 -->
					<template v-slot="{ row }">
						<el-avatar shape="square" :size="80" fit="scale-down" :src="row.imageUrl"></el-avatar>
					</template>
				</el-table-column>
				<el-table-column prop="productName" align="center" label="产品名称">
				</el-table-column>
				<el-table-column prop="description" align="center" label="产品描述">
				</el-table-column>
				<el-table-column prop="price" align="center" label="价格(元)">
				</el-table-column>
				<el-table-column prop="inventory" align="center" label="库存">
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template v-slot="{ row }">
						<el-button type="primary" @click="pre_order(row)" icon="iconfont icon-vip3">充值</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
	</div>
</template>
<script>
	import * as api from "@/api/users"
	export default {
		data(){
			return{
				vipList:[],
			}
		},
		meta:{
			title:'vipCharge',
			icon:'iconfont icon-chongzhi',
			name:'vip充值'
		},
		created(){
			this.getVipList()
		},
		methods:{
			getVipList(){
				api.getVipListApi().then(res=>{
					// console.log(res.data)
					this.vipList=res.data.data
				})
			},
			pre_order(row){
				// 获得当前这一行的product_id
				// console.log(row)
				let {product_id,category_id}=row
				// 跳转到预支付页面
				// $router操作路由,$route获取当前路由参数信息
				this.$router.push({path:'/preorder',query:{product_id}})
				// this.$confirm 提示
				this.$confirm("您正在申请进行vip购买页面,请确认进行跳转","购买提示",{
					confirmButtonText:'确认',
					cancelButtonText:'取消',
					type:'success',
				}).then(()=>{
					// 点击确定
					// 跳转到预支付页面
					this.$router.push({path:'/preorder',query:{product_id,category_id}})
				}).catch(()=>{
					this.$message({// 点击取消
						type:"error",
						message:"已取消购买"
					})
				})
			},
		}
	};
</script>
<style scoped lang="less">
.el-avatar {
	/deep/ img {
		width: 100%;
	}
	height: 30px !important;
	background-color: #fff;
}
.el-button--primary {
	background-color: #05a000;
}
</style>